<template>
	<div class="vip">
		<div class="vip-card">
			<div class="vip-title">
				<view class="titleLeft">
					<view class="titleLeftItem" @click="tabCange(2)">
						<view :class="type==2?'changeText':''">一折区
							<span v-if="type==2"></span>
						</view>
					</view>
					<view class="titleLeftItem" @click="tabCange(3)">
						<view :class="type==3?'changeText':''">二折区
							<span v-if="type==3"></span>
						</view>
					</view>
				</view>
				<view class="btn-more a-link" @click="itemClick('折扣区')">进去逛逛
					<image :src="require('../../../static/images/appointment/icon_next(1).png')"></image>
				</view>
			</div>
			<div>
				<div class="vipWrap">
					<div class="vip-item vipWrapItem" v-for="(item,index) in productData" :key="index"
						@click="jumpProductDetail(item)">
						<div class="vip-item-img">
							<image class="img default-img" :src="item.image"></image>
						</div>
						<div class="vip-item-info">
							<h3 class="name">
								{{item.productName}}
							</h3>
							<div class="stock">
								库存：{{item.stockNumber}}
							</div>
							<!-- 			    <div class="original-price">
			      ¥ {{item.originalPrice}}
			    </div> -->
							<div class="priceWrap">
								<div class="price" :style="{fontSize:item.price.toString().length>3?'29upx':'32upx'}">
									¥ {{item.price}}
								</div>
								<div class="priceWrapIconList">
									<div class="priceWrapIconListItem" v-if="item.jdDiscount">
										<image src="https://cereshop-mall.oss-cn-qingdao.aliyuncs.com/resources/icon_jd.jpg"></image>
										<div>{{item.jdDiscount}}折</div>
									</div>
									<div class="priceWrapIconListItem" v-if="item.tmDiscount">
										<image src="https://cereshop-mall.oss-cn-qingdao.aliyuncs.com/resources/icon_tm.jpg"></image>
										<div>{{item.tmDiscount}}折</div>
									</div>
									<div class="priceWrapIconListItem" v-if="item.vipDiscount">
										<image src="https://cereshop-mall.oss-cn-qingdao.aliyuncs.com/resources/icon_wph.png"></image>
										<div>{{item.vipDiscount}}折</div>
									</div>
								</div>
							</div>
							<view class="vipInfoBttom">
								<!-- <view>400+评价</view> -->
								<view>{{item.number}}{{item.number>500?'+':''}}付款</view>
							</view>
						</div>
					</div>
				</div>
				<!-- <div class="swiper vip-list" v-else>
          <div class="vip-item-warp" v-for="(itemJ,indexJ) in listTemp" :key="indexJ">
            <div class="vip-item"  v-for="(item,index) in itemJ" :key="index" @click="jumpProductDetail(item)">
              <div class="vip-item-img">
                <img class="img default-img" :src="item.image">
              </div>
              <div class="vip-item-info">
                <h3 class="name">
                  {{item.productName}}
                </h3>
                <div class="stock">
                  还剩{{item.stockNumber}}件
                </div>
                <div class="original-price">
                  ¥ {{item.originalPrice}}
                </div>
                <div class="price-warp">
                  <div class="flag">
                    <!-- #ifdef MP-WEIXIN -->
				<!-- <img src="../../../static/images/vip/flag-vip.png" alt="会员价" class="flagImg"/> -->
				<!-- #endif -->
				<!-- #ifdef H5 || APP-PLUS -->
				<!-- <image class="flagImg" src="../../../static/images/vip/flag-vip.png" alt="会员专区" mode="widthFix"/> -->
				<!-- #endif -->
				<!-- </div> -->
				<!-- <div class="price"> -->
				<!-- ¥ {{item.price}} -->
				<!-- </div> -->
				<!-- </div> -->
				<!-- <div class="btn-buy"> -->
				<!-- span>去购买</span>
                  <div class="progress">
                    <i></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div> -->
				<!--<div class="pagination vip-pagination"></div>-->
			</div>
		</div>
	</div>
</template>

<script>
	import {
		commonMixin
	} from '../mixin'
	export default {
		mixins: [commonMixin],
		data() {
			return {
				swiperCurrent: 0,
			}
		},
		computed: {
			listTemp: function() {
				var list = this.productData;
				var arrTemp = [];
				var index = -1;
				var count = 2; // 每组多少条
				for (var i = 0; i < list.length; i++) {
					if (i % count == 0) {
						arrTemp.push([]);
						index++
					}
					arrTemp[index].push(list[i]);
				}
				return arrTemp;
			}
		},
		methods: {
			swiperChange(e) {
				this.swiperCurrent = e.detail.current;
			},
			tabCange(e){
				console.log(this.type)
				this.type = e
				this.getData()
			},
			itemClick(name){
				uni.navigateTo({
					url:'/pages_category_page1/goodsModule/goodsList?name='+name + '&contentType=2'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.vipWrap {
		display: flex;
		overflow: auto;

		.vipWrapItem {
			width: 240upx;
		}
	}
	.titleLeft{
		display: flex;
		align-items: center;
		height: 60upx;
		margin-bottom: 20upx;
		padding-top: 24upx;
		.titleLeftItem{
			margin-right: 38upx;
			view{
				text-align: center;
			}
			.changeText{
				color: #EFB257;
				font-size: 32upx;
				span{
					width: 32upx;
					height: 4upx;
					background-color: #EFB257;
					border-radius: 18upx;
					display: block;
					margin: 0 auto;
					margin-top: 4upx;
				}
			}
		}
	}
	.priceWrap {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.priceWrapIconList {
			display: flex;
			justify-content: space-between;

			.priceWrapIconListItem {
				width: 40upx;

				image {
					width: 30upx;
					height: 30upx;
					border-radius: 8upx;
					margin-bottom: 4upx;
					display: block;
					margin: 0 auto;
				}

				div {
					font-size: 16upx;
					color: #EF1414;
				}
			}
		}

	}

	.vipInfoBttom {
		display: flex;
		justify-content: space-between;
		margin-top: 8upx;
		view {
			font-size: 20upx;
			color: #999999;
		}
	}

	.vip {
		width: 690upx;
		margin: 0 auto;
		margin-top: 32upx;

		&-card {
			background: #fff;
			padding: 0 20upx 20upx;
			border-radius: 16upx;
			position: relative;
		}

		&-title {
			// padding: 42upx 0 28upx 30upx;
			position: relative;

			.title-img {
				display: block;
				width: 197upx;
			}

			.btn-more {
				position: absolute;
				right: 24upx;
				top: 23upx;
				line-height: 33upx;
				font-size: 24upx;
				color: #999999;
				display: flex;
				align-items: center;
				image {
					width: 24upx;
					height: 24upx;
					margin-left: 8upx;
				}
			}
		}

		&-list {
			height: 562upx;
		}

		&-item {
			// display: flex;
			background-color: #fff;
			margin-right: 16upx;

			&-img {
				width: 240upx;
				height: 260upx;

				.img {
					width: 100%;
					height: 100%;
					object-fit: contain;
					display: block;
					border-radius: 16upx;
				}
			}

			&-info {

				position: relative;

				.name {
					width: 200upx;
					font-size: 28upx;
					//height: 75rpx;
					line-height: 40upx;
					color: #333333;
					margin: 16upx 0 8upx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					font-weight: 400;
				}

				// #ifdef H5 || APP-PLUS
				.name {
					height: 40rpx;
				}

				// #endif
				.stock {
					color: #999999;
					font-size: 24upx;
					display: inline-block;
					margin-bottom: 8upx;
				}

				.original-price {
					font-size: 24upx;
					line-height: 34upx;
					color: #CCCCCC;
					text-decoration: line-through;
				}

				.flag {
					float: left;
					padding: 12upx 10upx 0 0;

					.flagImg {
						width: 58upx;
						height: 36upx;
						display: block;
					}
				}

				.price {
					// font-size: 32upx;
					font-weight: bold;
					color: #EF1414;
				}

				.btn-buy {
					position: absolute;
					right: 20upx;
					bottom: 20upx;
					width: 160upx;
					height: 84upx;
					background: linear-gradient(90deg, #C83732 0%, #E25C44 100%);
					box-shadow: 0px 6upx 12upx rgba(233, 0, 0, 0.3);
					border-radius: 10upx;
					text-align: center;
					padding: 16upx 20upx 0;

					span {
						font-size: 24upx;
						line-height: 34upx;
						color: #FFFFFF;
						margin-bottom: 10upx;
						display: block;
					}

					.progress {
						height: 8upx;
						background: rgba(255, 255, 255, 0.5);
						border-radius: 4upx;
						position: relative;

						i {
							position: absolute;
							left: 0;
							top: 0;
							width: 50%;
							height: 8upx;
							background-color: #fff;
							border-radius: 4upx;
						}
					}
				}
			}
		}

		.vip-item-info {
			.price-warp {
				display: flex;
				align-items: center;
			}
		}

		.swiper-dots {
			display: flex;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 15upx;
			z-index: 66;

			.dot {
				width: 24upx;
				height: 4upx;
				background: #fff;
				opacity: 0.5;
				border-radius: 2upx;
				margin: 0 10upx;
			}

			.dot-active {
				opacity: 1;
			}
		}

		//.pagination{
		//  display: flex;
		//  justify-content: center;
		//  padding-top:20upx;
		//  ::v-deep .swiper-pagination-bullet{
		//    width: 24upx;
		//    height: 4upx;
		//    background: #fff;
		//    opacity: 0.5;
		//    border-radius: 2upx;
		//    margin: 0 5upx;
		//  }
		//  ::v-deep .swiper-pagination-bullet-active{
		//    opacity: 1;
		//  }
		//}
	}
</style>
